import 'dart:math' as math;
import 'package:flutter/material.dart';

class StaggerTest extends StatefulWidget {
  @override
  _StaggerTestState createState() => _StaggerTestState();
}

class _StaggerTestState extends State<StaggerTest>
    with TickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _sizeAnimation;
  late Animation<Color?> _colorAnimation;
  late Animation<Offset> _moveAnimation;

  late Animation<double> _rotateAnimation;

  final Duration _duration = Duration(milliseconds: 1000);

  final Curve _curve = Curves.ease;

  @override
  void initState() {
    super.initState();

    _controller = AnimationController(
      vsync: this,
      duration: _duration,
    );

    _rotateAnimation = Tween<double>(
      begin: 0,
      end: math.pi * 2,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0,
          1,
        ),
      ),
    );

    _sizeAnimation = Tween<double>(
      begin: 100,
      end: 50,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.3,
          curve: _curve,
        ),
      ),
    );

    _colorAnimation = ColorTween(
      begin: Colors.blue,
      end: Colors.blueGrey,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.3,
          0.7,
          curve: _curve,
        ),
      ),
    );

    _moveAnimation = Tween<Offset>(
      begin: Offset(0, 0),
      end: Offset(-150, -100),
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.1,
          1,
          curve: Curves.easeInOut,
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 8),
      height: 300,
      child: Column(
        children: [
          Expanded(
            child: Container(
              alignment: Alignment.center,
              child: AnimatedBuilder(
                animation: _controller,
                builder: (BuildContext context, Widget? child) {
                  return Transform.translate(
                    offset: _moveAnimation.value,
                    child: Transform.rotate(
                      angle: _rotateAnimation.value,
                      child: Container(
                        width: _sizeAnimation.value,
                        height: _sizeAnimation.value,
                        color: _colorAnimation.value,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
          TextButton(
            onPressed: () {
              if (_controller.status == AnimationStatus.dismissed ||
                  _controller.status == AnimationStatus.reverse) {
                _controller.forward();
              } else {
                _controller.reverse();
              }
            },
            child: Text('点击'),
          ),
        ],
      ),
    );
  }
}
